<template>
  <div>
    <div class="concern-header">
      <!-- 个人信息板块  -->
      <div></div>
      <div style="display: flex">
        <div class="item" @click="menu(1)" :class="{ active: menuId === 1 }">
          我的关注
        </div>
        <div class="item" @click="menu(2)" :class="{ active: menuId === 2 }">
          我的粉丝
        </div>
        <div class="item" @click="menu(3)" :class="{ active: menuId === 3 }">
          我的收藏
        </div>
        <div class="item" @click="menu(4)" :class="{ active: menuId === 4 }">
          我的点赞
        </div>
      </div>
    </div>
    <div
      class="concern-main"
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-svg-view-box="-10, -10, 50, 50"
      element-loading-background="rgba(242, 240, 245, 1)"
      style="width: 100%"
    >
      <!-- 关注列表 -->
      <concern-list
        v-if="menuId === 1 || menuId === 2"
        :data="dataList"
        :mobile="mobile"
        :type="menuId"
        @followed="followed"
      ></concern-list>
      <collect-like
        :data="dataList"
        v-if="menuId === 3 || menuId === 4"
        :type="menuId"
        @cancel="cancel"
      ></collect-like>
      <div v-if="loadmore" class="loading" @click="more">{{ title }}</div>
      <el-empty description="空数据" v-if="dataList.length <= 0" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import concernList from "@/components/concern/concern-list.vue";
import request from "@/assets/js/request";
import collectLike from "@/components/concern/collect-like.vue";
import { ElMessage } from "element-plus";

const menuId = ref(1);
const dataList = ref([]);
const mobile = localStorage.getItem("mobile");
const loading = ref(false);
const title = ref("加载更多");
const page = ref({
  current: 1,
  pages: 0,
  total: 0,
});
const loadmore = computed(() => {
  return page.value.current < page.value.pages;
});
const change = ref(false);

const followed = (type, uid) => {
  request
    .get(`/client/concern/followed?type=${type}&uid=${uid}`)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success(type === 0 ? "取关成功" : "关注成功");
        menu();
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const cancel = (id, type) => {
  request
    .get(`/client/cancel?type=${type}&videoId=${id}`)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success(type === 3 ? "已取消收藏" : "已取消点赞");
        dataList.value = [];
        getDataList();
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const getDataList = () => {
  loading.value = true;
  if (menuId.value === 1) {
    getConcern(1);
  } else if (menuId.value === 2) {
    getConcern(2);
  } else if (menuId.value === 3) {
    getCollect(1);
  } else if (menuId.value === 4) {
    getCollect(2);
  }

  setTimeout(() => {
    if (loading.value) {
      loading.value = false;
      change.value = false;
      title.value = "加载更多";
    }
  }, 10000);
};

const more = () => {
  title.value = "加载中...";
  page.value.current += 1;
  getDataList();
};

const getConcern = (type) => {
  request
    .get(`/client/concern/concern?type=${type}&current=${page.value.current}`)
    .then((res) => {
      if (res.code === 200) {
        dataList.value.push(...res.data.records);
        page.value.current = res.data.current;
        page.value.pages = res.data.pages;
        page.value.total = res.data.total;
      }
      loading.value = false;
      change.value = false;
      title.value = "加载更多";
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const getCollect = (type) => {
  request
    .get(`/client/like_collect?type=${type}&current=${page.value.current}`)
    .then((res) => {
      if (res.code === 200) {
        dataList.value.push(...res.data.records);
        page.value.current = res.data.current;
        page.value.pages = res.data.pages;
        page.value.total = res.data.total;
      }
      loading.value = false;
      change.value = false;
      title.value = "加载更多";
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const menu = (id) => {
  if (change.value || menuId.value === id) {
    return;
  }
  dataList.value = [];
  change.value = true;
  page.value = {
    current: 1,
    pages: 0,
    total: 0,
  };
  menuId.value = id;
  getDataList();
};

onMounted(() => {
  getDataList();
});
</script>

<style scoped lang="scss">
@mixin common($postion) {
  background: #fff;
  border-radius: 4px;
  padding: 20px $postion;
  box-sizing: border-box;
}

.concern-header {
  @include common(20px);
  .item {
    width: 6rem;
    &:hover {
      cursor: pointer;
      color: #ff6600;
    }
  }
}

.concern-main {
  margin-top: 30px;
  min-height: 50vh;
  @include common(10px);
}

.active {
  color: #ff6600;
  &::before {
    content: "";
    width: 10px;
    height: 2px;
  }
}
.loading {
  font-size: 14px;
  color: #5f5f5f;
  text-align: center;
  width: 100%;
  padding: 20px 0;
}
</style>
